<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import VideoPlay from './VideoPlay.vue'
import MottoBar from './MottoBar.vue'
import VolumeHighOutline from '@/assets/VolumeHighOutline.svg'
import VolumeMuteOutline from '@/assets/VolumeMuteOutline.svg'

const videoRef = ref<InstanceType<typeof VideoPlay>>()
const isMuted = ref<boolean>(true)

function switchMuted(value: boolean) {
  const video = videoRef.value
  if (video) {
    video.switchMuted(value)
    isMuted.value = value
  }
}
</script>

<template>
  <div class="container">
    <VideoPlay ref="videoRef" />
    <MottoBar />
    <template v-if="isMuted !== undefined">
      <VolumeHighOutline v-if="isMuted === false" class="icon" @click="switchMuted(true)" />
      <VolumeMuteOutline v-else="isMuted === true" class="icon" @click="switchMuted(false)" />
    </template>
  </div>
</template>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #000;
  user-select: none;
  .icon {
    @width: 45px;
    width: @width;
    height: @width;
    padding: 6px;
    position: fixed;
    z-index: 1;
    bottom: 16px;
    right: 16px;
    color: #fff;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 0 12px #000;
    cursor: pointer;
    pointer-events: all;
  }
}
</style>
